import { Link } from "react-router"
import store from "../../store/store";

var Ra = React.createClass({
	render: function() {
		return(
			<Link to={"home/list/word="+this.props.data}>{this.props.data}</Link>
		)
	}
})

	export default React.createClass({
	getInitialState: function() {
		return {
			hot: [],
			hist :[]
		}
	},
	componentWillMount: function(){
		//因为fetch无法请求,利用jquery的jsonp跨域请求 
		var that = this
			$.ajax({
				async: false,
				url: "http://www.chawo.com/mobile/index.php?act=index&op=search_key_list&_=1504576649338&callback=jsonp1",
				type: "GET",
				dataType: 'jsonp',
				success: function(data) {
					  that.setState({
					  		hot : data.datas.list
					  }) 
				}
			}) 
			
		//从数据库中获取搜索记录,动态创建a标签,历史信息
		//console.log(store.getState())
		 this.setState({
		 	hist : store.getState().ss.history
		 })
	}, 
	rem:function(){ 
		//点击删除事件清空当前列表,
		var obj = $(".sousuo_tui_bom a")
		obj.remove()
		//清空数据库中的数据,避免下次再次被加载
		//创建一个删除的action动作
		var action ={
		 	type :"REM_SS"
		 }
		 store.dispatch(action)
	}, 
	render: function(){
		var obj = this.state.hot.map(function(data, index) {
			return <Ra data={data} key={index}/>
		})
		var newobj = this.state.hist.map(function(data,index){
			return <Ra data={data} key={index}/>
		})
		return(
			<div>
				<div className= "sousuo_tui_top">
					<h3>热门搜索</h3>
					{obj}
				</div>
				<div className= "sousuo_tui_bom">
					<h3>历史记录</h3>
					{newobj}
					<span onClick={this.rem}>清空历史</span>
				</div>
			</div>
		)
	}
})